<!-- frontend/src/components/MarkdownRenderer.vue -->
<template>
  <div v-html="html"></div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import MarkdownIt from 'markdown-it';
import mk from 'markdown-it-katex';
import hljs from 'highlight.js';

const props = defineProps<{ content: string }>();

const md = new MarkdownIt({
  html: true,
  linkify: true,
  breaks: true, // ✅ 新增：启用单换行渲染为<br>
  highlight(code: string, lang?: string): string {   // ✅ 指明类型
    if (lang && hljs.getLanguage(lang)) {
      try {
        return `<pre><code class="hljs">${hljs.highlight(code, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
      } catch {}
    }
    const safe = md.utils.escapeHtml(code);
    return `<pre><code class="hljs">${safe}</code></pre>`;
  }
}).use(mk as any); // ✅ 没有类型，用 any

const html = computed(() => md.render(props.content || ''));
</script>